<template>
  <div class="MyTravel">

    <v-layout :class="{'Finance-form':isActive}">
      <div class="system-panel">
        <h2>用户管理</h2>
        <div class="system-btns">
          <v-dialog v-model="dialog"
                    width="50%">
            <template v-slot:activator="{ on, attrs}">
              <v-btn v-bind="attrs"
                     v-on="on"
                     :class="{'Search-btn':isActive}"
                     depressed>添加
              </v-btn>
            </template>
            <v-card>
              <v-col
                class="headline grey lighten-5"
                cols="12"
                md="12"
                sm="12"
              >
                添加用户
              </v-col>
            </v-card>
            <v-card-text>
              <v-col cols="12" md="12" sm="12">
                <v-text-field v-model="userModel.username" dense label="用户名"></v-text-field>
              </v-col>
              <v-col cols="12" md="12" sm="12">
                <v-text-field v-model="userModel.password" dense label="密码"></v-text-field>
              </v-col>
              <v-col cols="12" md="12" sm="12">
                <v-text-field v-model="userModel.nickname" dense label="真实姓名"></v-text-field>
              </v-col>
            </v-card-text>
            <v-card-actions :class="{'system-dialog':isActive}">
              <v-btn :class="{'Selete-btn':isActive}"
                     color="primary"
                     text
                     @click="save">
                添加
              </v-btn>
              <v-btn color="primary"
                     text
                     @click="close">
                取消
              </v-btn>
            </v-card-actions>
          </v-dialog>
          <v-btn
            :class="{'Search-btn system-delete-btn':isActive}"
            depressed>Delete
          </v-btn>
        </div>
      </div>
      <v-data-table
        :headers="headers"
        :items="desserts"
        :loading="loading"
        :options.sync="options"
        :server-items-length="totalDesserts"
        class="elevation-1"
      ></v-data-table>
    </v-layout>
  </div>
</template>
<script lang="ts">

import {Component, Vue, Watch} from "vue-property-decorator";
import {SaveUser} from '@/pagetypes';
import {Register, GetUserList} from '@/request';

@Component({})
export default class APP extends Vue {
  userModel: SaveUser = {username: '', password: '', nickname: ''}
  isActive: boolean = true
  dialog: boolean = false
  loading: boolean = true
  totalDesserts: number = 0
  options: any = {}
  headers: any = [
    {text: '用户姓名', value: 'nickName'},
    {text: '用户账号', value: 'userName'},
    {text: '密码', value: 'password'},
  ]
  desserts: any = [];
  @Watch('options', {deep: true})
  onOptionsChange() {
this.getList()

  }
  getList(){
    const {sortBy, sortDesc, page, itemsPerPage} = this.options
    var data:any = {}
    data.page = page
    this.loading = true;
    data.pageSize = itemsPerPage
    GetUserList(data).then((res:any)=>{
      console.log(res)
      if (res.data.code == 0) {
        this.totalDesserts = res.data.data.total;
        this.desserts = res.data.data.list;
        this.loading = false;
      }
    })
  }


  save() {
    Register(this.userModel).then((res: any) => {
      console.log(res)
      if (res.data.code == 0) {
        this.close()
      }
    })
  }

  close() {
    this.userModel = {username: '', password: '', nickname: ''};
    this.dialog = false
  }
}

</script>

